<script setup>
import axios from "axios";
import {onMounted,ref} from "vue";
import router from "@/router/index.js";

//评价板块
const pjbj = ref(false)
//评价后的弹窗
const pjhtc = ref(false)
//搜索跟踪查询
const my = ref(false)

//筛选遮盖
const sxzg = ref(false);
//筛选按钮
const sxy1 = ref(true)
//粉色删选按钮
const sxy2 = ref(false)
    //用来替代的图标
const sxy3 = ref(false)
//排序功能
const pxy1 = ref("pxnr2")
const pxy2 = ref("pxnr")
const pxy3 = ref("pxnr")
const pxy4 = ref("pxnr")
//视频排序方式
const px = ref(false)
//更改字体颜色
const b1y = ref("bar1")
const b2y = ref("bar2")
const b3y = ref("bar2")
const b4y = ref("bar2")
const b5y = ref("bar2")
//粉色横条
const bb1=ref(true)
const bb2=ref(false)
const bb3=ref(false)
const bb4=ref(false)
const bb5=ref(false)
//眼睛显示图片
const yan1=ref(true)
//眼睛隐藏图片
const yan2=ref(false)
//搜索历史板块
const ls = ref(false);
//删除历史页
const sc = ref(false);
//搜素发现内容
const fx = ref(false);
//搜索页
const lv = ref(true)
//叉号
const xh = ref(false)
//搜索文本
const wb = ref()
//分类id
const typeId = ref(0)
//搜索的集合
const sou = ref();
const sou2 = ref();
const sou3 = ref();
const sou4 = ref();
//搜索后内容
const c1nr = ref(true);
const c2nr = ref(false);
const c3nr = ref(false);
const c4nr = ref(false);
//跟踪查询
const gzss = ref();
//添加搜索历史
const ssls = ref()
//查询的搜索历史
const cxls =ref();

function pxgn1() {
  c1nr.value = true;
  c2nr.value = false;
  c3nr.value = false;
  c4nr.value = false;
  getSY();
  sxy1.value=true;
  sxy2.value=false;
  pxy1.value="pxnr2"
  pxy2.value="pxnr"
  pxy3.value="pxnr"
  pxy4.value="pxnr"
}
function pxgn2() {
  c1nr.value = false;
  c2nr.value = true;
  c3nr.value = false;
  c4nr.value = false;
  getSY2();
  sxy2.value=true;
  sxy1.value=false;
pxy1.value="pxnr"
  pxy2.value="pxnr2"
  pxy3.value="pxnr"
  pxy4.value="pxnr"
}
function pxgn3() {
  c1nr.value = false;
  c2nr.value = false;
  c3nr.value = true;
  c4nr.value = false;
  getSY3();
  sxy2.value=true;
  sxy1.value=false;
  pxy1.value="pxnr"
  pxy2.value="pxnr"
  pxy3.value="pxnr2"
  pxy4.value="pxnr"
}
function pxgn4() {
  c1nr.value = false;
  c2nr.value = false;
  c3nr.value = false;
  c4nr.value = true;
  getSY4();
  sxy2.value=true;
  sxy1.value=false;
  pxy1.value="pxnr"
  pxy2.value="pxnr"
  pxy3.value="pxnr"
  pxy4.value="pxnr2"
}

function sxsp() {
  px.value=!px.value
  sxzg.value=!sxzg.value
}
function b1() {
  typeId.value=0;
  getSY();
  b1y.value = "bar1";
  b2y.value = "bar2";
  b3y.value = "bar2";
  b4y.value = "bar2";
  b5y.value = "bar2";
  bb1.value = true;
  bb2.value = false;
  bb3.value = false;
  bb4.value = false;
  bb5.value = false;
  sxy1.value=true;
  sxy2.value=false;
  sxy3.value=false;
  sxzg.value=false;
}
function b2() {
  typeId.value=12;
  getSY();
  b1y.value = "bar2";
  b2y.value = "bar1";
  b3y.value = "bar2";
  b4y.value = "bar2";
  b5y.value = "bar2";
  bb1.value = false;
  bb2.value = true;
  bb3.value = false;
  bb4.value = false;
  bb5.value = false;
  px.value=false;
  sxy2.value=false;
  sxy3.value=true;
  sxy1.value=false;
  sxzg.value=false;
}
function b3() {
  typeId.value=4;
  getSY();
  b1y.value = "bar2";
  b2y.value = "bar2";
  b3y.value = "bar1";
  b4y.value = "bar2";
  b5y.value = "bar2";
  bb1.value = false;
  bb2.value = false;
  bb3.value = true;
  bb4.value = false;
  bb5.value = false;
  px.value=false;
  sxy3.value=true;
  sxy2.value=false;
  sxy1.value=false;
  sxzg.value=false;
}
function b4() {
  typeId.value=17;
  getSY();
  b1y.value = "bar2";
  b2y.value = "bar2";
  b3y.value = "bar2";
  b4y.value = "bar1";
  b5y.value = "bar2";
  bb4.value = true;
  bb2.value = false;
  bb3.value = false;
  bb1.value = false;
  bb5.value = false;
  px.value=false;
  sxy3.value=true;
  sxy2.value=false;
  sxy1.value=false;
  sxzg.value=false;
}
function b5() {
  typeId.value=23;
  getSY();
  b1y.value = "bar2";
  b2y.value = "bar2";
  b3y.value = "bar2";
  b4y.value = "bar2";
  b5y.value = "bar1";
  bb5.value = true;
  bb2.value = false;
  bb3.value = false;
  bb4.value = false;
  bb1.value = false;
  px.value=false;
  sxy3.value=true;
  sxy2.value=false;
  sxy1.value=false;
  sxzg.value=false;
}
function fxyan() {
  fx.value = !fx.value;
  yan1.value = !yan1.value
  yan2.value = !yan2.value
}
function shan() {
 sc.value=!sc.value;
}
function shan2() {
  sc.value=!sc.value;
delLS();
ls.value=false
}
//添加搜索历史
function addLS() {
  ssls.value=wb.value;
  axios.post("http://localhost:8088/sou/addLS",ssls.value,{
    params:{lsname:ssls.value},
    headers:{"token":"addLS"}
  }).then(res => {
    if (res.data){
    }else {
      alert("网络异常")
    }
  }).catch(err => {
    console.log(err)
  })
  return false
}
//搜索查询功能
function getSY(){
  axios.get("http://localhost:8088/sou/getSY",{
    params:{wb:wb.value,typeId:typeId.value},
    headers:{token:"getSY"}//为了权限验证
  }).then(res=>{
    console.log(res.data)
    sou.value = res.data//获取相应(返回的)的数据
  }).catch(err=>{
    console.log(err)//异常处理
  })
}
function getSY2(){
  axios.get("http://localhost:8088/sou/getSY2",{
    params:{wb:wb.value},
    headers:{token:"getSY2"}//为了权限验证
  }).then(res=>{
    console.log(res.data)
    sou2.value = res.data//获取相应(返回的)的数据
  }).catch(err=>{
    console.log(err)//异常处理
  })
}
function getSY3(){
  axios.get("http://localhost:8088/sou/getSY3",{
    params:{wb:wb.value},
    headers:{token:"getSY2"}//为了权限验证
  }).then(res=>{
    console.log(res.data)
    sou3.value = res.data//获取相应(返回的)的数据
  }).catch(err=>{
    console.log(err)//异常处理
  })
}
function getSY4(){
  axios.get("http://localhost:8088/sou/getSY4",{
    params:{wb:wb.value},
    headers:{token:"getSY2"}//为了权限验证
  }).then(res=>{
    console.log(res.data)
    sou4.value = res.data//获取相应(返回的)的数据
  }).catch(err=>{
    console.log(err)//异常处理
  })
}
function getGZ(){
  axios.get("http://localhost:8088/sou/getGZ",{
    headers:{token:"getGZ"}//为了权限验证
  }).then(res=>{
    console.log(res.data)
    gzss.value = res.data//获取相应(返回的)的数据
  }).catch(err=>{
    console.log(err)//异常处理
  })
}
function getLSB(){
  axios.get("http://localhost:8088/sou/getLSB",{
    headers:{token:"getLSB"}//为了权限验证
  }).then(res=>{
    console.log(res.data)
    cxls.value = res.data//获取相应(返回的)的数据
  }).catch(err=>{
    console.log(err)//异常处理
  })
}
function delLS(){
  axios.get("http://localhost:8088/sou/delLS",{
    headers:{token:"delLS"}//为了权限验证
  }).then(res=>{
    console.log(res.data)
    cxls.value = res.data//获取相应(返回的)的数据
  }).catch(err=>{
    console.log(err)//异常处理
  })
}
onMounted(()=>{
  getSY();
  getSY2();
  getSY3();
  getSY4();
  getGZ();
  getLSB();
})
function yc() {
  if (wb.value!=null) {
    getSY();
    ssls.value=wb.value;
    addLS();
    getLSB();
    if (cxls!=null) {
      getLSB();
      ls.value=true;
    }
    my.value = false;
    lv.value = false;
    xh.value = true;
  }
}
function xs() {
  getLSB();
  lv.value = true;
  xh.value = false;
  wb.value = null;
  my.value = false;
}
function djjt() {
  getLSB();
  lv.value = true;
  my.value = false;
}
/* 点击按钮设置下拉菜单的显示与隐藏 */
function dk() {
    my.value = true;
}
function gbmy() {
  my.value = false;
  lv.value = false;
  xh.value = true;
}
function gbssnr(gg) {
  getLSB();
  if (cxls!=null) {
    getLSB();
    ls.value=true;
  }
wb.value= gg
  ssls.value=wb.value;
  getSY();
  addLS();
}
function djls(ls) {
  wb.value=ls
  getSY();
  lv.value = false;
  xh.value = true;
}
/* 搜索功能 */
function filterFunction() {
  var input, filter, div,txtValue,ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

function pj() {
   pjbj.value = true;
}
function gbpj() {
  pjbj.value = false;
}
function pjtc() {
  pjhtc.value = true;
  pjbj.value = false;
  setTimeout(() => {
    pjhtc.value = false; //1.5s后自动关闭
  }, 1500);
}


</script>

<template>
  <div class="pj" v-show="pjbj">
    <div class="pjnr">
    <img src="/image/gp01稍后观看.jpg" width="377" height="50" class="pjimg1">
    <img src="/image/gp02分享.jpg" width="377" height="50" class="pjimg1">
    <img src="/image/gp03搜索反馈.jpg" width="377" height="20" class="pjimg2">
      <div class="row">
      <div class="pjbk col-xs-6" @click="pjtc">与搜索词无关</div>
      <div class="pjbk col-xs-6" @click="pjtc">看后发现质量差</div>
      <div class="pjbk col-xs-6" @click="pjtc">内容过时</div>
      <div class="pjbk col-xs-6" @click="pjtc">我不想看该视频</div>
      </div>
      <div class="pjhb"></div>
      <div class="pjbb" @click="gbpj">取消</div>
    </div>
  </div>

  <div class="pjh text-center" v-show="pjhtc">感谢反馈，我们将继续优化</div>

  <div class="sxzg" v-show="sxzg" ></div>

  <div class="dropdown" v-show="my">
    <div id="myDropdown" class="dropdown-content" @click="gbmy">
            <a href="#" class="myrn" v-for="g in gzss" :key="g.id" @click="gbssnr(g.title)" >{{g.title.substring(0.21)}}</a>
        </div>
      </div>

  <div class="scls" v-show="sc">
    <div class="sctc">
      <span class="shan1">删除全部搜索历史?</span>
      <hr>
      <span class="shan2" @click="shan">取消</span>
      <span class="shan3" @click="shan2">全部删除</span>
    </div>
  </div>

  <div class="ssk">
    <div class="jtbf" @click="djjt">
    <img src="/image/左箭头.png" width="25" height="25" class="zjt" @click="router.go(-1)" />
    </div>
    <img src="/image/搜索小图标.png" width="14" height="14" class="st"/>
    <img src="/image/bilbil图标01.png" width="40" height="40" class="xds"/>
    <img src="/image/叉号.png" width="15" height="14.5" class="x" v-show="xh" @click="xs"/>
    <div class="fg"></div>
    <input type="text" class="sk"  placeholder="请输入..." id="myInput" v-model="wb" @keyup="filterFunction" @click="dk">
    <h6 class="ann" @click="yc" @submit.prevent="addLS">搜索</h6>
  </div>

  <div class="hong ">
    <div class="sxsp" v-show="px">
      <div class="sxsp2">
        <span class="pxfs">排序方式</span>
        <div class="sxsp3">
        <div :class="[pxy1]" @click="pxgn1" >默认排序</div>
        <div :class="[pxy2]" @click="pxgn2">新发布</div>
        <div :class="[pxy3]" @click="pxgn3">时间长</div>
        <div :class="[pxy4]" @click="pxgn4">播放多</div>
        </div>
      </div>
    </div>
    <div class="csboos">
      <input type="radio" name="r" id="r1" checked>
      <input type="radio" name="r" id="r2">
      <input type="radio" name="r" id="r3">
      <input type="radio" name="r" id="r4">
      <input type="radio" name="r" id="r5">
      <div class="cs1 s1">
          <div class="c1nr" v-for="s in sou" :key="s.id" v-show="c1nr">
            <img :src="s.fengmian" class="zsnr" width="178" height="100" @click="router.push({name:'ces',query:{id:s.id,typeId:s.typeId}})">
            <img src="/image/三个点点.png" class="dian3" width="20" height="20" @click="pj">
            <div class="zqjsc">{{s.comRateTime}}</div>
            <div class="biaoti col-xs-12">
              <h6>{{s.title.substring(0,19)}}</h6>
            </div>
            <div class="upbfl">
              <img src="/image/up主.png" width="20" height="20" class="up">
              <img src="/image/播放量.png" width="20" height="20" class="bfl">
              <p class="upnr">{{s.upName.substring(0,9)}}</p>
              <p class="bflnr">{{s.zqjbfl}}&nbsp;·&nbsp;{{s.createdTime.substring(0,9)}}···</p>
            </div>
          </div>

        <div class="c1nr" v-for="s in sou2" :key="s.id" v-show="c2nr">
          <img :src="s.fengmian" class="zsnr" width="178" height="100" @click="router.push({name:'ces',query:{id:s.id,typeId:s.typeId}})">
          <img src="/image/三个点点.png" class="dian3" width="20" height="20" @click="pj">
          <div class="zqjsc">{{s.comRateTime}}</div>
          <div class="biaoti col-xs-12">
            <h6>{{s.title.substring(0,19)}}</h6>
          </div>
          <div class="upbfl">
            <img src="/image/up主.png" width="20" height="20" class="up">
            <img src="/image/播放量.png" width="20" height="20" class="bfl">
            <p class="upnr">{{s.upName.substring(0,9)}}</p>
            <p class="bflnr">{{s.zqjbfl}}&nbsp;·&nbsp;{{s.createdTime.substring(0,9)}}···</p>
          </div>
        </div>

        <div class="c1nr" v-for="s in sou3" :key="s.id" v-show="c3nr">
          <img :src="s.fengmian" class="zsnr" width="178" height="100" @click="router.push({name:'ces',query:{id:s.id,typeId:s.typeId}})">
          <img src="/image/三个点点.png" class="dian3" width="20" height="20" @click="pj">
          <div class="zqjsc">{{s.comRateTime}}</div>
          <div class="biaoti col-xs-12">
            <h6>{{s.title.substring(0,19)}}</h6>
          </div>
          <div class="upbfl">
            <img src="/image/up主.png" width="20" height="20" class="up">
            <img src="/image/播放量.png" width="20" height="20" class="bfl">
            <p class="upnr">{{s.upName.substring(0,9)}}</p>
            <p class="bflnr">{{s.zqjbfl}}&nbsp;·&nbsp;{{s.createdTime.substring(0,9)}}···</p>
          </div>
        </div>

        <div class="c1nr" v-for="s in sou4" :key="s.id" v-show="c4nr">
          <img :src="s.fengmian" class="zsnr" width="178" height="100" @click="router.push({name:'ces',query:{id:s.id,typeId:s.typeId}})">
          <img src="/image/三个点点.png" class="dian3" width="20" height="20" @click="pj">
          <div class="zqjsc">{{s.comRateTime}}</div>
          <div class="biaoti col-xs-12">
            <h6>{{s.title.substring(0,19)}}</h6>
          </div>
          <div class="upbfl">
            <img src="/image/up主.png" width="20" height="20" class="up">
            <img src="/image/播放量.png" width="20" height="20" class="bfl">
            <p class="upnr">{{s.upName.substring(0,9)}}</p>
            <p class="bflnr">{{s.zqjbfl}}&nbsp;·&nbsp;{{s.createdTime.substring(0,9)}}···</p>
          </div>
        </div>

      </div>
      <div class="cs2">
        <div class="c1nr" v-for="s in sou" :key="s.id">
          <img :src="s.fengmian" class="zsnr" width="178" height="100" @click="router.push({name:'ces',query:{id:s.id,typeId:s.typeId}})">
          <img src="/image/三个点点.png" class="dian3" width="20" height="20" @click="pj">
          <div class="zqjsc">{{s.comRateTime}}</div>
          <div class="biaoti col-xs-12">
            <h6>{{s.title.substring(0,19)}}</h6>
          </div>
          <div class="upbfl">
            <img src="/image/up主.png" width="20" height="20" class="up">
            <img src="/image/播放量.png" width="20" height="20" class="bfl">
            <p class="upnr">{{s.upName.substring(0,9)}}</p>
            <p class="bflnr">{{s.zqjbfl}}&nbsp;·&nbsp;{{s.createdTime.substring(0,9)}}···</p>
          </div>
        </div>

      </div>
      <div class="cs3">
        <div class="c1nr" v-for="s in sou" :key="s.id">
          <img :src="s.fengmian" class="zsnr" width="178" height="100" @click="router.push({name:'ces',query:{id:s.id,typeId:s.typeId}})">
          <img src="/image/三个点点.png" class="dian3" width="20" height="20" @click="pj">
          <div class="zqjsc">{{s.comRateTime}}</div>
          <div class="biaoti col-xs-12">
            <h6>{{s.title.substring(0,19)}}</h6>
          </div>
          <div class="upbfl">
            <img src="/image/up主.png" width="20" height="20" class="up">
            <img src="/image/播放量.png" width="20" height="20" class="bfl">
            <p class="upnr">{{s.upName.substring(0,9)}}</p>
            <p class="bflnr">{{s.zqjbfl}}&nbsp;·&nbsp;{{s.createdTime.substring(0,9)}}···</p>
          </div>
        </div>

      </div>
      <div class="cs4">
        <div class="c1nr" v-for="s in sou" :key="s.id">
          <img :src="s.fengmian" class="zsnr" width="178" height="100" @click="router.push({name:'ces',query:{id:s.id,typeId:s.typeId}})">
          <img src="/image/三个点点.png" class="dian3" width="20" height="20" @click="pj">
          <div class="zqjsc">{{s.comRateTime}}</div>
          <div class="biaoti col-xs-12">
            <h6>{{s.title.substring(0,19)}}</h6>
          </div>
          <div class="upbfl">
            <img src="/image/up主.png" width="20" height="20" class="up">
            <img src="/image/播放量.png" width="20" height="20" class="bfl">
            <p class="upnr">{{s.upName.substring(0,9)}}</p>
            <p class="bflnr">{{s.zqjbfl}}&nbsp;·&nbsp;{{s.createdTime.substring(0,9)}}···</p>
          </div>
        </div>

      </div>
      <div class="cs5">
        <div class="c1nr" v-for="s in sou" :key="s.id">
          <img :src="s.fengmian" class="zsnr" width="178" height="100" @click="router.push({name:'ces',query:{id:s.id,typeId:s.typeId}})">
          <img src="/image/三个点点.png" class="dian3" width="20" height="20" @click="pj">
          <div class="zqjsc">{{s.comRateTime}}</div>
          <div class="biaoti col-xs-12">
            <h6>{{s.title.substring(0,19)}}</h6>
          </div>
          <div class="upbfl">
            <img src="/image/up主.png" width="20" height="20" class="up">
            <img src="/image/播放量.png" width="20" height="20" class="bfl">
            <p class="upnr">{{s.upName.substring(0,9)}}</p>
            <p class="bflnr">{{s.zqjbfl}}&nbsp;·&nbsp;{{s.createdTime.substring(0,9)}}···</p>
          </div>
        </div>

      </div>
    </div>

    <div class="nav">
      <label for="r1"  id="b1" @click="b1" :class="[b1y]">
        综合
        <div class="bb" v-show="bb1"></div>
      </label>
      <label for="r2"  id="b2" @click="b2"  :class="[b2y]">
        电影
        <div class="bb" v-show="bb2"></div>
      </label>
      <label for="r3"  id="b3" @click="b3" :class="[b3y]">
        动画
        <div class="bb" v-show="bb3"></div>
      </label>
      <label for="r4"  id="b4" @click="b4" :class="[b4y]">
        游戏
        <div class="bb" v-show="bb4"></div>
      </label>
      <label for="r5"  id="b5" @click="b5" :class="[b5y]">
        生活
        <div class="bb" v-show="bb5"></div>
      </label>
      <img src="/image/B站筛选.jpg" class="bsx" width="33" height="30" @click="sxsp" v-show="sxy1">
      <img src="/image/筛选粉.jpg" class="bsx2" width="34" height="35" @click="sxsp" v-show="sxy2">
      <img src="/image/bilibili图标02.png" class="bsx2" width="34" height="34" v-show="sxy3">
    </div>

  </div>

  <div class="lv" v-show="lv">
    <span class="bt">bilibili热搜</span>
    <span class="bt2 ">完整榜单 ></span>
    <img src="/image/热搜.png" class="rst" width="345" height="150"/>
      <div class="lis" v-show="ls">
        <p class="ssls">搜索历史<img src="/image/垃圾箱.png" class="ljx" width="16" height="16" @click="shan"/></p>
        <div class="row csx">
        <div class="cs text-center col-xs-4" v-for="c in cxls" :key="c.id" @click="djls(c.lsname)">{{c.lsname.substring(0,4)}}...</div>
        </div>
      </div>
      <div class="fx">
        <p class="ssfx">搜索发现
          <img src="/image/显示.png" class="yan" width="19" height="19" @click="fxyan" v-show="yan1">
          <img src="/image/隐藏.png" class="yan" width="19" height="19" @click="fxyan" v-show="yan2">
        </p>
        <div class="row fxnr" v-show="fx">
          <div class="fxh  col-xs-6" @click="djls('这些万恶之源名场面你还记得吗？')">这些万恶之源名场面 ···</div>
          <div class="fxh  col-xs-6" @click="djls('女铠？苏珊铠甲！')">女铠？苏珊铠甲！</div>
          <div class="fxh  col-xs-6" @click="djls('猜猜为什么会推到你面前？')">猜猜为什么会推到你 ···</div>
          <div class="fxh  col-xs-6" @click="djls('官方和玩家:这一年你更是颠倒没边！')">官方和玩家:这一年你 ···</div>
          <div class="fxh  col-xs-6" @click="djls('这么帅？不要命啦！')">这么帅？不要命啦！</div>
          <div class="fxh  col-xs-6" @click="djls('恭喜发财！毒液先生~')">恭喜发财！毒液先生~</div>
          <div class="fxh  col-xs-6" @click="djls('大黑塔你的帽子怎么尖尖的？')">大黑塔你的帽子怎么 ···</div>
          <div class="fxh  col-xs-6" @click="djls('鱼头喇嘛格斗！')">鱼头喇嘛格斗！</div>
          <div class="fxh  col-xs-6" @click="djls('王者荣耀')">王者荣耀</div>
          <div class="fxh  col-xs-6" @click="djls('年度盲盒开箱！')">年度盲盒开箱！</div>
        </div>
      </div>
  </div>
</template>

<style scoped>
*{
  margin:0;
  padding:0;
}
.zqjsc{
  position: relative;
  top: -0.45rem;
  left: 8.8rem;
  z-index: 98;
  width: 2rem;
  height: 1rem;
  background: rgba(0, 0, 0, 0.44);
  border-radius: 2.5px;
  text-align: center;
  color: #e5e5ec;
  font-size: 10px;
}
.pjhb{
  position: relative;
  top: 1.5rem;
  width:100%;
  height:0.4rem;
  background-color: #eff1f2;
}
.pjbb{
  position: relative;
  font-size:14px;
  top: 1.5rem;
  width:100%;
  height:4rem;
  line-height: 4rem;
  text-align: center;
  font-weight: bold;
  background-color: #f4f5f7;
}
.pjbk{
  text-align:center;
  font-size:14px;
  position: relative;
  top: 1.5rem;
  left: 1.35rem;
  margin-left: 1rem;
  margin-bottom: 0.7rem;
  width: 9.6rem;
  color: #333333;
  border-radius: 0.2rem;
  height: 2.4rem;
  line-height: 2.4rem;
  border: #dcdedf solid 1px;
  background-color: #f5f7f8;
}
.pjimg1{
  position: relative;
top: 0.2rem;
}
.pjimg2{
  position: relative;
  top: 0.6rem;
}
.pjnr{
position: relative;
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
  background-color: #f5f7f8;
  width: 100%;
  height: 20rem;
  top: 22rem;
}
.pj{
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.59);
}
.pjh{
  position: fixed;
  top: 0.6rem;
  left: 4.6rem;
  z-index: 99999;
  width: 14rem;
  height: 2.5rem;
  line-height: 2.5rem;
  border-radius: 0.4rem;
  background-color: rgba(0, 0, 0, 0.66);
  color: rgba(255, 255, 255, 0.7);
}
/* 容器 <div> - 定位下拉菜单 */
.dropdown {
  z-index: 10000;
  position: fixed;
  top: 3rem;
  display: inline-block;
}

/* 下拉菜单内容 (默认隐藏) */
.dropdown-content {
  position: absolute;
  background-color: #fff;
  width: 23.5rem;
  height: 130rem;
  font-size: 12px;
  z-index: 10001;
}

/* 下拉菜单链接样式 */
.dropdown-content a {
  color: #000000;
  border-bottom: #d0d2d3 1px solid;
 padding-top: 0.8rem;
 margin-left: 1rem;
 margin-right: 1rem;
  width: 21.4rem;
  height: 3.2rem;
  text-decoration: none;
  display: block;
}
.myrn{
  width: 6rem;
  height: 6rem;
}
.dian3{
  position: relative;
  z-index: 98;
  left: 9.9rem;
  top: 3.5rem;
}
.up{
  position: relative;
  top: -1.5rem;
  left: -0.1rem;
}
.upnr{
  position: relative;
  width: 8.6rem;
  font-size: 13px;
  color: #b0afaf;
  top: -2.8rem;
  left: 1.4rem;
}
.bflnr{
  position: relative;
  width: 8.2rem;
  font-size: 13px;
  color: #b0afaf;
  top: -2.55rem;
  left: 1.4rem;
}
.bfl{
  position: relative;
  top: -0.09rem;
  left: -1.35rem;
}
.upbfl{
  position: relative;
  top: -4.2rem;
  left: 11.8rem;
  width: 10rem;
  height: 2.35rem;
}
.biaoti{
  position: relative;
  top: -6.2rem;
  left: 11.8rem;
  width: 10rem;
  height: 2.8rem;
}
.zsnr{
  position: relative;
  top: 0.9rem;
  border-radius: 0.3rem;
  z-index: 10;
}
.zwnr{
  position: relative;
  top: 0.9rem;
  border-radius: 0.5rem;
  z-index: 9;
}
.sxzg{
  width:100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.59);
  position: fixed;
  z-index: 99;
}
.c1nr{
  position: relative;
  width:96.5%;
  height:8.1rem;
  background:#fff;
  margin-left: 0.8rem;
  border-bottom: #d5d4d4 solid 1px;
}
.sxsp{
  position: relative;
  top: 5.5rem;
  width: 100%;
}
.sxsp2{
position: relative;
  top: 0.1rem;
  width: 100%;
  height: 5rem;
  background-color: #fff;
  z-index: 100;
}
.sxsp3{
  position: relative;
  top: 0.4rem;
  left: -0.2rem;
  display: flex;
  width: 100%;
  height: 3rem;
  background-color: #fff;
  justify-content: center;
  align-items: center;
}
.pxfs{
  position: relative;
  top: 0.5rem;
  left: 1.3rem;
  height: 5rem;
  font-size: 14px;
color: black;
}

.pxnr{
position: relative;
  text-align: center;
  margin-left: 0.5rem;
  width: 5.1rem;
  height: 1.8rem;
  line-height: 1.8rem;
  font-size: 13px;
  color: rgb(98, 98, 98);
  border-radius: 0.2rem;
  background-color: #f4f5f7;
}
.pxnr2{
  position: relative;
  text-align: center;
  margin-left: 0.5rem;
  width: 5.1rem;
  height: 1.8rem;
  line-height: 1.8rem;
  font-size: 13px;

  border-radius: 0.2rem;
  color: #ff4185;
  background-color: #f4f5f7;
}
.bb{
  position:relative;
  z-index: 999;
  top: 0.55rem;
  left: 0.73rem;
  width:1.8rem;
  height:0.11rem;
  background:#ff4185;
}
.bar1{
  width: 3.3rem;
  height: 2rem;
  margin-top: 0.6rem;
  margin-left: 0.6rem;
  cursor: pointer;
  transition: 0.4s;
  text-align: center;
  font-size: 14px;
  color: #ff4185;
}
.bar2{
  width: 3.3rem;
  height: 2rem;
  margin-top: 0.6rem;
  margin-left: 0.6rem;
  cursor: pointer;
  transition: 0.4s;
  text-align: center;
  font-size: 14px;
  color: rgb(98, 98, 98);
}

.bsx{
  position: relative;
  top: -0.28rem;
  left: 1rem;
}
.bsx2{
  position: relative;
  top: -0.2rem;
  left: 0.95rem;
}
.yan{
  position: relative;
  left: 16.8rem;
}
.shan3{
  position: relative;
  left: 9rem;
  top: 3rem;
  color: #ff4185;
  font-size: 17px;
}
.shan2{
  position: relative;
  top: 3rem;
  left: 3.5rem;
  color: #000000;
  font-size: 17px;
}
.sctc>hr{
  color: #a1a1a1;
  position: relative;
  top: 2.5rem;
}
.shan1{
  position: relative;
  font-weight: bold;
  font-size: 17px;
  top: 1.1rem;
  left: 4.6rem;
}
.scls{
  position: fixed;
  z-index: 99999;
  width: 150%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.58);
}
.sctc{
position: relative;
  top: 40%;
  left: 7.4%;
  width: 52%;
  height: 7rem;
  border-radius: 8px;
  background-color: #fff;
}
.fx{
  padding-top:3.3rem;
  position: relative;
  width: 100%;
  height: 100%;
}
.fxnr{
  padding-left: 1.15rem;
}
.csx{
  padding-left: 0.8rem;
}
.ssfx{
  position:relative;
  left: 1rem;
  color: #000000;
  font-size:14px;
  font-weight: bold;
  margin-bottom: 0.8rem;
}
.ljx{
  position:relative;
  left: 17.1rem;
}
.ssls{
  position:relative;
  left: 1rem;
  color: #000000;
  font-size:14px;
  font-weight: bold;
  margin-bottom: 1rem;
}
.fxh{
  background-color: #f4f5f7;
  margin-left: 0.5rem;
  margin-bottom: 0.7rem;
  font-size:14px;
  height:1.9rem;
  line-height:1.9rem;
  width: 44.4%;
  border-radius:4px;
}
.cs{
  background-color: #f4f5f7;
  margin-left: 0.8rem;
  margin-bottom: 0.7rem;
  font-size:14px;
  height:1.9rem;
  line-height:1.9rem;
  width: 25%;
  border-radius:4px;
}
.lis{
  padding-top: 3.3rem;
  position: relative;
  width: 100%;
  height: 8rem;
  z-index: 9999;
}

.rst{
  margin: 0.8rem;
  position: relative;
  top: 3.15rem;
}
.bt2{
  margin:1rem;
  position:relative;
  top:3.3rem;
  right:-11.2rem;
  color: #9e9e9e;
  font-size:13px;
}
.bt{
  margin:1rem;
  position:relative;
  top: 3.3rem;
  color: #000000;
  font-size:14px;
}

.x{
  position: fixed;
  z-index: 999;
  right: 7.7rem;
}
.fg{
  position: fixed;
  z-index: 999;
  right: 6.9rem;
  width:1px;
  height:0.8rem;
  background-color: #9e9e9e;
}
.xds{
  position: fixed;
  z-index: 999;
  right: 4.2rem;
}
.st{
  position:fixed;
  z-index: 999;
left: 3.2rem;
}
.sk{
  caret-color: #ff4185;
  margin-left: 0.25rem;
  font-size: 15px;
  width: 17rem;
  position: relative;
line-height: 2rem;
  border: #9e9e9e solid 1px;
  border-radius: 2rem;
padding-left: 2rem;
padding-right: 5rem;
  text-decoration: none;
  background: none;
  outline: none;
}
.ann{
  margin-left: 1rem;
  color: #ff4185;
  position: relative;
  width: 2rem;
  height: 2rem;
line-height: 2rem;
}

.hong{
  position: absolute;
  width: 100%;
  height: 200rem;
  background-color: #fff;
  overflow: hidden;
}
.nav{
  position: absolute;
  z-index: 99;
  top: 3rem;
  display: flex;
  width: 100%;
  height: 2.6rem;
  align-items: center;
  background-color: #fff;
  border-bottom: #d8d8da solid 1px;
}


input[name="r"]{
  position: absolute;
  visibility: hidden;
}

.csboos{
  width: 500%;
  height: 100%;
  display: flex;
}
.cs1{
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: 0.6s;
  padding-top: 5.6rem;
  background-image: url("/image/暂无内容（背景）.jpg");
  background-repeat: no-repeat;
  background-position: 3rem 8rem;
  background-size:18rem 6rem;
}
.cs2{
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: 0.6s;
  padding-top: 5.6rem;
  background-image: url("/image/暂无内容（背景）.jpg");
  background-repeat: no-repeat;
  background-position: 3rem 8rem;
  background-size:18rem 6rem;
}
.cs3{
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: 0.6s;
  padding-top: 5.6rem;
  background-image: url("/image/暂无内容（背景）.jpg");
  background-repeat: no-repeat;
  background-position: 3rem 8rem;
  background-size:18rem 6rem;
}
.cs4{
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: 0.6s;
  padding-top: 5.6rem;
  background-image: url("/image/暂无内容（背景）.jpg");
  background-repeat: no-repeat;
  background-position: 3rem 8rem;
  background-size:18rem 6rem;
}
.cs5{
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: 0.6s;
  padding-top: 5.6rem;
  background-image: url("/image/暂无内容（背景）.jpg");
  background-repeat: no-repeat;
  background-position: 3rem 8rem;
  background-size:18rem 6rem;
}
#r1:checked ~ .s1{margin-left: 0;}
#r2:checked ~ .s1{margin-left: -24.98%;}
#r3:checked ~ .s1{margin-left: -66.64%;}
#r4:checked ~ .s1{margin-left: -149.95%;}
#r5:checked ~ .s1{margin-left: -399.9%;}

.lv{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 999;
}
.ssk{
  padding-right: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 3rem;
  background-color: #fff;
  z-index: 9999;
}
</style>